@import "m_reset.scss";
@import url(https://at.alicdn.com/t/c/font_3632122_rhpxfni478c.css);

@function getvw($w){
    @return ($w  /750)*100 + vw
}

.wrap{
    header{
        nav{
            display: flex;
            padding: getvw(17) getvw(23) getvw(9) getvw(23);
            align-items: center;
            justify-content: space-between;
            .logo{
                width: getvw(123);
                height: getvw(123);
            }
            .search{
                position: relative;
                input{
                    width: getvw(265);
                    height: getvw(50);
                    border: 1px solid #ff9344;
                    border-radius: getvw(50);
                    font-size: getvw(24);
                    padding: 0 getvw(25);
                }
                i{
                    font-size: getvw(30);
                    color:#ff9344;
                    position: absolute;
                    right: getvw(24);
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            .area{
                position: relative;
                select{
                    width: getvw(160);
                    height: getvw(55);
                    border: 1px solid #ff9344;
                    appearance: none;
                    padding-left: getvw(14);
                }
                i{
                    font-size: getvw(30);
                    color:#ff9344;
                    position: absolute;
                    right: getvw(11);
                    top: 50%;
                    transform: translateY(-50%);
                    pointer-events: none;
                }
            }
        }
        @keyframes slideshow {
            0%{
                transform: translateX(0px);
            }
            50%{
                transform: translateX(-375px);
            }
            100%{
                transform: translateX(0px);
            }
        }
        .banner{
            overflow:hidden;
            width: 100%;
            ul{
                padding: 0;
                display: flex;
                width: 200%;
                animation: slideshow 3s infinite;
                li{
                    width: 100%;
                    height:getvw(287) ;
                    img{
                        width: 100%;
                        display: block;
                    }
                }
            }
        }
    }
    main{
        .discounts{
            display: flex;
            padding-top: getvw(33);
            img{
                width: getvw(55);
                height: getvw(55);
                padding-left: getvw(27);
            }
            p{
                font-size: getvw(40);
                white-space:nowrap;
            }
            p:nth-of-type(2){
                font-size: getvw(30);
                padding-left: getvw(400);
            }
            i{
                font-size: getvw(30);
                font-weight: bolder;
                color: #ff9344;
                padding-left: getvw(8);
            }
        }
        .picture{
            display: flex;
            justify-content: space-around;
            img{
                width: getvw(240);
                height: getvw(95);
                padding-top: getvw(30);
            }
        }
        .like{
            display: flex;
            padding-top: getvw(33);
            i{
                font-size: getvw(50);
                color: #ff9344;
                padding-left: getvw(27);
            }
            p{
                font-size: getvw(40);
                white-space:nowrap;
            }
            p:nth-of-type(2){
                font-size: getvw(30);
                padding-left: getvw(400);
            }
            i:nth-of-type(2){
                font-size: getvw(30);
                font-weight: bolder;
                color: #ff9344;
                padding-left: getvw(8);
            } 
        }
        .cate{
            width: getvw(717);
            height: getvw(170);
            .sushi{
                display: flex;
                margin-top: getvw(20);
                .Food_pictures{
                    display: flex;
                    flex-direction: column;
                    img{
                        width: getvw(210);
                        height: getvw(164);
                    }
                }
                .eat{
                    display: flex;
                    flex-direction:column;
                    justify-content: space-around;
                    p{
                        font-size: getvw(40);
                        font-weight: bold;
                        padding-left: getvw(20);
                        span{
                            font-size: getvw(20);
                            font-weight: lighter;
                            color: #000;
                            padding-left: getvw(40);
                            line-height: getvw(40);
                        }
                    }
                    p:nth-of-type(2){
                        font-size: getvw(30);
                        font-weight: lighter;
                    }
                    p:nth-of-type(3){
                        position: relative;
                        color: #ff9344;
                        span{
                            line-height: getvw(40);
                            position: absolute;
                            right: 0;
                        }
                    }
                    
                }
            }
        }
    }
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        .nav{
            ul{
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                li{
                    i{
                        color: #ff9344;
                        font-size: getvw(50);
                    }
                    
                    p{
                        color: #000;
                        font-size: getvw(30);
                    }
                }
            }
        }
    }
}